﻿var arrWhiteIndex = new Array(0, 2, 3, 5, 7, 8, 10, 12, 14, 15, 17, 19, 20, 22, 24, 26, 27, 29, 31, 32, 34, 36, 38, 39, 41, 43, 44, 46, 48, 50, 51, 53, 55, 56, 58, 60, 62, 63, 65, 67, 68, 70, 72, 74, 75, 77, 79, 80, 82, 84, 86, 87);
var arrBlackIndex = new Array(1, 4, 6, 9, 11, 13, 16, 18, 21, 23, 25, 28, 30, 33, 35, 37, 40, 42, 45, 47, 49, 52, 54, 57, 59, 61, 64, 66, 69, 71, 73, 76, 78, 81, 83, 85);
var whiteTColor = new Array("#0094ff", "#ff6a00", "#ff6a00", "#ffd800", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#b200ff", "#00ff90", "#b6ff00", "#0094ff", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#ffd800", "#0094ff", "#b200ff", "#4cff00", "#ff006e", "#0094ff", "#ff6a00", "#ff6a00", "#ffd800", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#b200ff", "#00ff90", "#b6ff00", "#0094ff", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#ffd800", "#0094ff", "#b200ff", "#4cff00", "#ff006e", "#b6ff00", "#0094ff");
var blackTColor = new Array("#0094ff", "#ff6a00", "#ff6a00", "#ffd800", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#b200ff", "#00ff90", "#b6ff00", "#0094ff", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#ffd800", "#0094ff", "#b200ff", "#4cff00", "#ff006e", "#0094ff", "#ff6a00", "#ff6a00", "#ffd800", "#ffd800", "#b6ff00", "#807676", "#ff006e", "#4cff00", "#00ff21", "#b200ff");

var xScroll = 0;
var firstMP;
var isScroll = false;

var whiteWidth = 75;
var whiteHeight = 300;
var blackHeight = 190;
var whitePad = 2;
var blackWidth = 47;
var firstPad = 4;
var isRecord = 0;

var colorMap = MusicTheory.Synesthesia.map();

var isKeo = 0;
var isDown = 0;
var arrPo = new Array();
var arrT = new Array();
var arrS=new Array();



function DrawPiano() {


    // Draw piano


    var d = 0;
    for (var i = 0; i < arrWhiteIndex.length; i++) {
        var element = document.getElementById("note" + arrWhiteIndex[i]);
        element.style.left = firstPad + (whiteWidth + whitePad) * i + "px";
        arrPo[arrWhiteIndex[i]] = firstPad + (whiteWidth + whitePad) * i;
        arrT[arrWhiteIndex[i]] = 0;
        element.style.width = whiteWidth + "px";
        element.style.height = whiteHeight + "px";
        element.style.borderTopColor = '#' + colorMap[arrWhiteIndex[i]].hex;

        if (i == arrWhiteIndex.length - 1) {
            d = firstPad + (whiteWidth + whitePad) * i + whiteWidth + firstPad;
        }
    }

    var pianodiv = document.getElementById("piano");
    pianodiv.style.width = d + "px";

    //var hdiv = document.getElementById("hdiv");
    //hdiv.style.width = d - 2 + "px";


    for (var i = 0; i < arrBlackIndex.length; i++) {
        var element = document.getElementById("note" + arrBlackIndex[i]);
        element.style.width = blackWidth + "px";
        element.style.height = blackHeight + "px";
        element.style.borderTopColor = '#' + colorMap[arrBlackIndex[i]].hex;//blackTColor[i];
        var j = 0;

        var d = firstPad;
        while (arrBlackIndex[i] > arrWhiteIndex[j]) {

            d = d + whiteWidth + whitePad;
            j = j + 1;

        }
        d = d - whitePad / 2 - blackWidth / 2;
        element.style.left = d + "px";
        arrPo[arrBlackIndex[i]] = d;
        arrT[arrBlackIndex[i]] = 1;
    }
    for (var i = 0; i < 88; i++) {
        arrS[i] = 0;
    }
    

};

function AddEvent() {
    for (var i = 0; i < arrWhiteIndex.length; i++) {
        var tempw = document.getElementById("note" + arrWhiteIndex[i]);

        tempw.addEventListener("MSPointerDown", function (e) {
            var idColr = parseInt(this.id.substr(4), 10);
            for (var k = 0; k < arrWhiteIndex.length; k++) {
                if (idColr == arrWhiteIndex[k]) {
                    idColr = k;
                }

            }
            isDown = 1;

            //noteON - TuCuong
            if (arrS[arrWhiteIndex[idColr]] == 0) {
                MIDI.noteOn(0, arrWhiteIndex[idColr], 90, 0);
                arrS[arrWhiteIndex[idColr]] = 1;
            }
            

            this.style.backgroundColor = '#' + colorMap[arrWhiteIndex[idColr]].hex;

            // Neu dang record thi luu
            if (isRecord == 1) {
                keyDown(arrWhiteIndex[idColr]);
            }

        }, false);


        tempw.addEventListener("MSPointerUp", function (e) {
            this.style.backgroundColor = "#fff"; var idColr = parseInt(this.id.substr(4), 10);
            for (var k = 0; k < arrWhiteIndex.length; k++) {
                if (idColr == arrWhiteIndex[k]) {
                    idColr = k;
                }

            }
            isDown = 0;
            arrS[arrWhiteIndex[idColr]] = 0;
            if (isRecord == 1) {

                keyUp(arrWhiteIndex[idColr]);
            }

        }, false);
        // Move out
        tempw.addEventListener("MSPointerOut", function (e) {
            this.style.backgroundColor = "#fff";
            var idColr = parseInt(this.id.substr(4), 10);
            for (var k = 0; k < arrWhiteIndex.length; k++) {
                if (idColr == arrWhiteIndex[k]) {
                    idColr = k;
                }

            }
            arrS[arrWhiteIndex[idColr]] = 0;
            if (isRecord == 1) {

                keyUp(arrWhiteIndex[idColr]);
            }

        }, false);
        //
        tempw.addEventListener("MSPointerMove", function (e) {
            if (isDown == 1) {
                var idColr = parseInt(this.id.substr(4), 10);
                for (var k = 0; k < arrWhiteIndex.length; k++) {
                    if (idColr == arrWhiteIndex[k]) {
                        idColr = k;
                    }

                }

                //noteON - TuCuong
                if (arrS[arrWhiteIndex[idColr]] == 0) {
                    MIDI.noteOn(0, arrWhiteIndex[idColr], 90, 0);
                    arrS[arrWhiteIndex[idColr]] = 1;
                }

                this.style.backgroundColor = '#' + colorMap[arrWhiteIndex[idColr]].hex;
                if (isRecord == 1) {

                    keyUp(arrWhiteIndex[idColr]);
                }
            }
            

        }, false);

    }

    for (var i = 0; i < arrBlackIndex.length; i++) {
        var tempb = document.getElementById("note" + arrBlackIndex[i]);
        tempb.addEventListener("MSPointerDown", function (e) {
            var idColr = parseInt(this.id.substr(4), 10);
            for (var k = 0; k < arrBlackIndex.length; k++) {
                if (idColr == arrBlackIndex[k]) {
                    idColr = k;
                }

            }
            isDown = 1;
            
            //noteON - TuCuong
            if (arrS[arrBlackIndex[idColr]] == 0) {
                MIDI.noteOn(0, arrBlackIndex[idColr], 90, 0);
                arrS[arrBlackIndex[idColr]] = 1;
            }
            

            //Windows.UI.Popups.MessageDialog("nguyen").showAsync();
            document.getElementById("note"+arrBlackIndex[idColr]).style.backgroundImage = "url(../images/blackP.png)";

            
            if (isRecord == 1) {

                keyDown(arrBlackIndex[idColr]);
            }
        }, false);
        tempb.addEventListener("MSPointerUp", function (e) {
            this.style.backgroundColor = "#000";
            var idColr = parseInt(this.id.substr(4), 10);
            for (var k = 0; k < arrBlackIndex.length; k++) {
                if (idColr == arrBlackIndex[k]) {
                    idColr = k;
                }

            }
            isDown = 0;
            arrS[arrBlackIndex[idColr]] = 0;
            document.getElementById("note" + arrBlackIndex[idColr]).style.backgroundImage = "url(../images/blackR.png)";
            if (isRecord == 1) {

                keyUp(arrBlackIndex[idColr]);
            }
        }, false);
        tempb.addEventListener("MSPointerMove", function (e) {
            if (isDown == 1) {
                var idColr = parseInt(this.id.substr(4), 10);
                for (var k = 0; k < arrBlackIndex.length; k++) {
                    if (idColr == arrBlackIndex[k]) {
                        idColr = k;
                    }

                }

                //noteON - TuCuong
                if (arrS[arrBlackIndex[idColr]] == 0) {
                    MIDI.noteOn(0, arrBlackIndex[idColr], 90, 0);
                    arrS[arrBlackIndex[idColr]] = 1;
                }

                this.style.backgroundColor = '#' + colorMap[arrBlackIndex[idColr]].hex;
                if (isRecord == 1) {

                    keyUp(arrBlackIndex[idColr]);
                }
            }


        }, false);

    }

    //var record = document.getElementById("btnRecord");
    //record.onclick = function () {
    //    record.innerText = "recording";
    //    record.style.backgroundColor = "pink";
    //    isRecord = 1;
    //}

    //var save = document.getElementById("btnSave");
    //save.onclick = function () {
    //    if (isRecord == 0) {
    //        Windows.UI.Popups.MessageDialog("You have no song to save!", "LittleBet").showAsync();
    //    }
    //    else {
    //        var record = document.getElementById("btnRecord");
    //        record.innerText = "record";
    //        record.style.backgroundColor = "lightskyblue";

    //        var name = "littleBet";
    //        var content = saveSong();//"TVRoZAAAAAYAAAABAIBNVHJrAAAAHTKQKFpkkDhaAJBGWoEAgEZaAIAoWiiAOFoA";

    //        var url = "http://services.huynhanhtuan.com/Student.svc/addnewsong/public/" + name + "/2012-1-1/100/" + content + "/3-10";
    //        WinJS.xhr({ url: url }).done(onComplete, onError, onProgress);


           

    //        //Windows.UI.Popups.MessageDialog("Save your song successful!", "LittleBet").showAsync();
    //        isRecord = 0;
    //    }

    //}
};

function onComplete(xhr) {
    var items = xhr.responseXML;
    if (items != null) {
        Windows.UI.Popups.MessageDialog("Save your song successful!", "LittleBet").showAsync();
    } else {
        Windows.UI.Popups.MessageDialog("Save your song successful!", "LittleBet").showAsync();
    }
}
function onError() {
    Windows.UI.Popups.MessageDialog("Save your song successful!", "LittleBet").showAsync();
}

function onProgress() {
}
function KeyboardInit() {
    DrawPiano();
    AddEvent();
    sweep();
    window.scrollTo(1500, 0);
    
}

function sweep() {
    var piano = document.getElementById("cvMain");
    var xScroll = 1500;
    var firstMP;

    piano.onmousedown = function (evt) {
        isScroll = true;
        firstMP = evt.x;

    }
    piano.onmousemove = function (evt) {
        if (isScroll == true) {
            var offset = evt.x - firstMP;
            if (offset < 0) {
                xScroll = xScroll - offset;

            }
            else {
                xScroll = xScroll - offset;
                if (xScroll <= 0) {
                    xScroll = 0;
                }
            }
            window.scrollTo(xScroll, 0);

            firstMP = evt.x;

        }

    }
    piano.onmouseup = function (evt) {
        isScroll = false;
    }
}


